<template>
    <div>
        <div class="content__top">
            <el-button @click="handleAddContent" type="primary">请选择视频文件</el-button>
        </div>
        <el-table :data="content" style="width: 100%" row-key="id">
            <el-table-column type="index" width="80" label="序号">
            </el-table-column>
            <el-table-column prop="title" label="名称">
            </el-table-column>
            <el-table-column label="操作" width="240">
                <template slot-scope="scope">

                    <PersButton type="danger" perms="kanke:textbook:courseware:del" label="删除"
                        @click="handleDel(scope.row.id)" />
                </template>
            </el-table-column>
        </el-table>
        <upload-file v-if="uploadDialogVisible" :visible.sync="uploadDialogVisible" @childFileEvent="onFinish"
            :limitNum="10" :limitType="limitType" />
    </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';

import UploadFile from '@/views/kanke/components/UploadFile.vue'

export default {
    name: "VideoContent",
    props: {
        content: {
            type: Array,
            default() {
                return []
            }
        },
        id: {
            type: [Number, String],
        },
    },
    components: {
        UploadFile
    },
    data() {
        return {
            uploadDialogVisible: false,
            limitType: [2],
        }
    },
    methods: {
        ...mapActions('courseware', ['getContent', 'addContent']),
        onFinish(val, allMultipleVal) {
            if (allMultipleVal.length) {
                let file_list = []
                allMultipleVal.map(item => {
                    const row = {
                        file_id: item.file_id,
                        file_url: item.file_url,
                        title: item.title,
                        course_id: this.id,
                    }

                    file_list.push(row)
                })
                const params = {
                    file_list,
                    course_id: this.id
                }
                // 目前只取一个
                this.addContent(params).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        this.getContent({ id: this.id })
                    }
                })
            }

        },
        handleAddContent() {
            if (!this.id) {
                this.$message.error('请先添加课本,再选择内容!')
                return
            }
            this.$store.commit('courseware/setContentDetail', {})
            this.uploadDialogVisible = true
        },
        handleDel(id) {
            this.$confirm('是否删除该内容', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit('handleDelContent', id)
            })
        }
    }

}
</script>
<style lang="scss" scoped></style>